const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },

  plugins: [
    //HtmlWebpackPlugin 可以 new HtmlWebpackPlugin() 多个，配置多个模板
    new HtmlWebpackPlugin({
      //模板文件的位置
      template: "./src/template.html",
      //配置标题在html模板文件中通过<%=HtmlWebpackPlugin.options.title%> 取值
      title: "Webpack Plugin",
      //打包后生成的html的文件名称
      filename: "index.html",
      //<script></script> 标签在html模板文件中的位置
      //['head','body',true, false]
      //head: script标签插入到html的<head></head>中
      //body: script标签插入到html<body></body>中
      //false: 不插入script标签到html
      //true: 和body 一样
      inject: "body",
      //在src的末尾加入一个hash值
      //如： <script type="text/javascript" src="main.bundle.js?ba95be726b457ede9c6a"></script>
      hash: true,
      minify: {
        //压缩空格
        collapseWhitespace: true,
        //压缩引号
        removeAttributeQuotes: true,
        //移除注释
        removeComments: true
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],

  devServer: {
    host: "localhost",
    port: 1573,
    open: true,
    hot: true
  }
};
